import React, { useEffect, useState } from "react";
import { Search as VantSearch, Toast, Cell } from "react-vant";
import { ArrowLeft } from "@react-vant/icons";
import styles from "./search.module.scss";
import { debounce } from "lodash";
import { createFromIconfontCN } from "@react-vant/icons";
import http from "../../http";
import { useNavigate } from "react-router-dom";
export default function Search() {
  const navigate = useNavigate();
  //自定义iconFont
  const IconFont = createFromIconfontCN(
    "//at.alicdn.com/t/c/font_4410449_0rttf6qac4u.js"
  );
  const [value, setValue] = useState("");
  const [renderedHisList, setRenderedHisList] = useState([]);
  //历史搜索
  const [HisList, setHisList] = useState(
    JSON.parse(localStorage.getItem("hisList") as string) || []
  );
  const handelSearch = debounce(() => {
    if (value !== "") {
      const item = HisList.find((v: string) => v === value);
      if (!item) {
        HisList.unshift(value);
      } else {
        HisList.splice(HisList.indexOf(value), 1);
        HisList.unshift(value);
      }
      setValue("");
           navigate(`/searchList?param=${value}`);
    } else{
     navigate(`/searchList?param=${null}`);
    }
    
    localStorage.setItem("hisList", JSON.stringify(HisList));
 
  }, 500);
  useEffect(() => {
    // console.log(HisList);
    //当HisList发生改变后调用set方法重新渲染组件,达到更新视图的目的
    setRenderedHisList(HisList);
  }, [HisList]);
  //热门搜索
  interface HotListType {
    id: number;
    name: string;
  }
  const [Hotlist, setHotlist] = useState<HotListType[]>([]);
  useEffect(() => {
    //热门搜索数据
    http.get("/health/share/v1/popularSearch").then((res: any) => {
      setHotlist(res.result);
    });
    let data = { email: "3106440365@qq.com", pwd: "123456" };
    http.post("/health/user/v1/login", data, {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
    });
  }, []);
  return (
    <div>
      <div className={styles.header}>
        <ArrowLeft
          className={styles.ArrowLeft}
          onClick={() => navigate(`/deafult/home`)}
        />
        <VantSearch
          className={styles.VantSearch}
          shape="round"
          background="#fff"
          value={value}
          onChange={setValue}
          placeholder="病症、药品名称、医生姓名"
        />
        <div onClick={handelSearch}>搜索</div>
      </div>
      <div className={styles.Con}>
        <div className={styles.HistrySearch}>
          <div className={styles.histop}>
            <span>历史搜索</span>
            <IconFont name="icon-lajitong"></IconFont>
          </div>
          <div className={styles.hisList}>
            {HisList.map((v: string, i: number) => {
              return (
                <div key={i}>
                  <span>{v}</span>
                </div>
              );
            })}
          </div>
          <div className={styles.HotSearch}>
            <div className={styles.histop}>
              <span>热门搜索</span>
            </div>
            <div className={styles.hotlist}>
              {Hotlist.map((v, i) => {
                return (
                  <div key={v.id}>
                    <span>{v.name}</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
      <div className={styles.SearchList}></div>
    </div>
  );
}
